import {Menu, Icon, Button, Collapse, Drawer, List, Avatar} from 'antd';
import React from 'react';
import './Menues.css';
import {Link} from 'react-router-dom';
import {getMenu} from "../../api/BlogApi";
import ReactDOM from "react-dom";

const SubMenu = Menu.SubMenu;
const Panel = Collapse.Panel;


class Menues extends React.Component {

    constructor(props) {
        super(props);
        this.state = {menuList: [], menuStyle: "noMenu", toastMenu: false, toastMenuList: []}
    }


    state = {
        current: 'mail',
    };

    handleClick = (e) => {
        console.log('click ', e);
        this.setState({
            current: e.key,
        });
    };


    async componentDidMount() {
        const request = await getMenu();
        let menuData = request.data;
        let itemList = [];
        let toastMenuList = [];
        toastMenuList.push({id: 0, name: "首页", icon: 'desktop'});
        menuData.forEach((menu) => {
            if (menu.subMenuList.length === 0) {
                itemList.push(
                    <Menu.Item key={menu.id}><Icon type={menu.icon}/>{menu.name}</Menu.Item>
                );
                toastMenuList.push({id: menu.id, name: menu.name, icon: menu.icon})

            } else if (menu.subMenuList.length > 0) {
                let subMenuList = [];
                menu.subMenuList.forEach((menu) => {
                    subMenuList.push(
                        <Menu.Item key={menu.id}><Icon type={menu.icon}/>{menu.name}</Menu.Item>
                    );
                    toastMenuList.push({id: menu.id, name: menu.name, icon: menu.icon})
                });
                itemList.push(<SubMenu key={menu.id} title={<span className="submenu-title-wrapper"><Icon
                    type={menu.icon}/>{menu.name}</span>}>{subMenuList}</SubMenu>);
            }
        });
        this.setState({menuList: itemList, toastMenuList: toastMenuList});
        this.updateSize();
        window.addEventListener('resize', () => this.updateSize());
    }

    componentWillReceiveProps(nextProps, nextContext) {
        console.log(nextProps.size)
    }

    componentWillUnmount() {
        window.removeEventListener('resize', () => this.updateSize());
    }

    updateSize() {
        try {
            const parentDom = ReactDOM.findDOMNode(this).parentNode;
            let {width, height} = this.props;
            //如果props没有指定height和width就自适应
            if (!width) {
                width = parentDom.offsetWidth;
            }
            if (!height) {
                height = width * 0.38;
            }
            this.setState({width, height});
        } catch (ignore) {
        }
    }

    render() {
        if (this.state.width > 1400) {
            return (<Menu
                onClick={this.handleClick}
                selectedKeys={[this.state.current]}
                mode="horizontal">
                <Menu.Item key="index"><Link to="/"><Icon type="desktop"/>首页</Link></Menu.Item>
                {this.state.menuList}
            </Menu>);
        } else {
            return (
                <div style={{float: 'right'}}>
                    <Button style={{marginTop: 10, marginRight: 20}} type={"default"}
                            onClick={() => this.setState({toastMenu: !this.state.toastMenu})}>

                        <Icon type={"bars"}/>
                        菜单

                        <Drawer
                            closable={false}
                            maskClosable={false}
                            visible={this.state.toastMenu}
                        >
                            <List
                                size={"small"}
                                dataSource={this.state.toastMenuList}
                                renderItem={item => (
                                    <List.Item>

                                        <List.Item.Meta
                                            title={<Link to="/">{item.name}</Link>}
                                        />
                                    </List.Item>
                                )}
                            />
                            {/*{this.state.toastMenuList}*/}
                        </Drawer>
                    </Button>
                </div>);
        }
    }
}

export default Menues;
